<template>
	<el-form size="medium" ref="userForm" :model="userForm" class="user_select_wrapper">
		<div class="user_select_table hidden-xs-only">
			<div class="head">
				<span v-for="(item, index) in columnData" :key="index">{{ item.label }}</span>
			</div>
			<div class="empty" v-if="userForm.users.length === 0">暂无数据</div>
			<div v-else class="item" v-for="(item, index) in userForm.users" :key="index">
				<el-form-item v-for="(n, i) in columnData" :key="i" :prop="`users.${index}.${n.prop}`" :rules="userRules[n.prop]">
					<template v-if="n.mode === 'select'">
						<el-select v-model="item[n.prop]" :placeholder="`选择${n.label}`" @change="handleSelectChange">
							<el-option v-for="(n, i) in list" :key="i" :label="n.msg" :value="n.value" />
						</el-select>
					</template>
					<template v-else-if="n.mode === 'input'">
						<el-input v-model="item[n.prop]" :placeholder="`输入${n.label}`"></el-input>
					</template>
				</el-form-item>
				<el-form-item>
					<el-button type="text" class="del" icon="el-icon-delete" @click="handleDelete(index)"></el-button>
				</el-form-item>
			</div>
		</div>
		<div class="user_select_card hidden-sm-and-up"></div>
		<el-button type="primary" size="small" class="add" @click="handleAdded()">新增一位</el-button>
	</el-form>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			userForm: { users: this.value },
			userRules: {
				modeType: [{ required: true, message: '请选择参与方式', trigger: 'change' }]
			},
			columnData: [
				{ label: '参与方式', prop: 'modeType', width: '120', mode: 'select' },
				{ label: '姓名', prop: 'name', width: '120', mode: 'input' },
				{ label: '单位', prop: 'dept', width: '120', mode: 'input' },
				{ label: '职称', prop: 'position', width: '120', mode: 'input' },
				{ label: '角色', prop: 'role', width: '120', mode: 'input' }
			]
		};
	},
	watch: {
		value(arr) {
			this.$set(this.userForm, 'users', arr);
		},
		'userForm.users'(arr) {
			console.log(arr);
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		handleAdded() {
			this.userForm.users.push({ name: '', dept: '', position: '', role: '', modeType: '' });
		},

		handleDelete(index) {
			this.userForm.users.splice(index, 1);
		},

		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['userForm'].validate((valid) => {
					resolve(valid);
				});
			});
		},

		handleSelectChange(val) {
			if (val === '0') {
				this.$delete(this.userRules, 'name');
				this.$delete(this.userRules, 'dept');
				this.$delete(this.userRules, 'role');
				this.$delete(this.userRules, 'position');
			} else {
				const initRules = (message) => {
					return [{ required: true, message, trigger: 'blur' }];
				};
				this.$set(this.userRules, 'name', initRules('请输入姓名'));
				this.$set(this.userRules, 'dept', initRules('请输入单位'));
				this.$set(this.userRules, 'role', initRules('请输入角色'));
				this.$set(this.userRules, 'position', initRules('请输入职称'));
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.user_select_wrapper {
	line-height: 1;
	.el-button.del {
		display: flex;
		font-size: 18px;
		padding: 8px;
	}
	.el-button.add {
		font-size: 14px;
		margin-top: 10px;
	}
}
.user_select_table {
	width: 100%;
	border: solid 1px #ebeef5;
	box-sizing: border-box;
	border-radius: 4px;
	overflow: hidden;
	.head {
		display: flex;
		padding-right: 56px;
		background-color: #f6f8fa;
		font-weight: bold;
		span {
			flex: 1;
			color: #606266;
			line-height: 1;
			font-size: 15px;
			padding: 18px 10px;
		}
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: solid 1px #ebeef5;
		font-size: 15px;
		color: #909399;
		height: 56px;
	}
	.item {
		display: flex;
		border-top: solid 1px #ebeef5;
	}
	.el-form-item {
		flex: 1;
		padding: 10px;
		overflow: hidden;
		&:last-child {
			flex: none;
			width: 36px;
			flex-shrink: 0;
		}
	}
	&:deep(.el-form-item__content) {
		line-height: 1;
	}
}
</style>
